<template>
  <div class="pusettings">
      <div>开启推送 <el-switch v-model="switchgear" /></div>
      <div class="pushtime"><span class="pushtime_lg"></span><span>推送时间</span></div>
      <div>
          <div class="workdays">
              <span> <el-checkbox v-model="checked1" size="large" :disabled="!switchgear">只在工作日推送</el-checkbox></span>
              <div class="workdays_color">{{ dynamicTags.length }}<span>/10</span></div>
          </div>
          <div class="workdays_time">
              <el-tag v-for="tag in dynamicTags" :key="tag" style="margin-right: 15px;" class="mx-1" closable
                  :disable-transitions="false" @close="handleClose(tag)">
                  {{ tag }}
              </el-tag>
              <el-time-select v-if="inputVisible" ref="InputRef" style="width: 200px;" v-model="inputValue" start="08:00"
                  step="01:00" end="24:00" placeholder="选择推送的时间" @keyup.enter="handleInputConfirm"
                  @blur="handleInputConfirm" />
              <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput" :disabled="!checked1">
                  + 添加时间
              </el-button>
          </div>
      </div>

      <div style="margin-top: 50px;">
          <div class="pushtime"><span class="pushtime_lg"></span><span>推送方式</span></div>
          <div class="pushemail">
              <span> <el-checkbox v-model="email" size="large" :disabled="!switchgear">邮件推送</el-checkbox></span>
              <div>
                  <div class="pushemailBox" v-for="(item, index) in emailList" :key="index">
                      <span class="pushemailBox_one">
                          <el-input style="width: 150px;" v-model="item.name" placeholder="请输入邮件" />
                      </span>
                      <span class="pushemailBox_two">
                          <img v-if="item.id == 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jia.png"
                              alt="" @click="emailClick(item.id)">
                          <img v-if="item.id != 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jian.png"
                              alt="" @click="emailClick_qx(item.id)">
                      </span>
                  </div>
              </div>
          </div>
          <div class="pushemail">
              <span> <el-checkbox v-model="duanxin" size="large" :disabled="!switchgear">短信推送</el-checkbox></span>
              <div>
                  <div class="pushemailBox" v-for="(item, index) in duanxinList" :key="index">
                      <span class="pushemailBox_one">
                          <el-input style="width: 150px;" v-model="item.name" placeholder="请输入邮件" />
                      </span>
                      <span class="pushemailBox_two">
                          <img v-if="item.id == 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jia.png"
                              alt="" @click="daunxinClick(item.id)">
                          <img v-if="item.id != 1" style="width: 36px; height: 36px;" src="@/assets/img/mypoints/jian.png"
                              alt="" @click="daunxinClick_qx(item.id)">
                      </span>
                  </div>
              </div>
          </div>
          <div style="width: 500px; text-align: center; margin-top: 80px;">
              <el-button type="primary" @click="submissions" :disabled="!switchgear">提交</el-button>
          </div>
      </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
let switchgear = ref(false)
let checked1 = ref(false)
let email = ref(false)
let duanxin = ref(false)
const inputValue = ref('')
const dynamicTags = ref(['13:00', '14:00', '15:00'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
      InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
      dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}


let emailList = ref([
  {
      id: 1,
      name: ''
  },

])

const emailClick = (id) => {
  if (email.value) {
      emailList.value.push(
          {
              id: id + 1,
              name: ''
          },
      )
  }
}
const emailClick_qx = (id) => {
  if (id != 1) {
      emailList.value = emailList.value.slice(0, 1).concat(emailList.value.slice(2));
  }
}

let duanxinList = ref([
  {
      id: 1,
      name: '',
  },
])

const daunxinClick = (id) => {
  if (duanxin.value) {
      duanxinList.value.push(
          {
              id: id + 1,
              name: ''
          },
      )
  }
}

const daunxinClick_qx = (id) => {
  if (id != 1) {
      duanxinList.value = duanxinList.value.slice(0, 1).concat(duanxinList.value.slice(2));
  }
}

const submissions = () => {
  let arrSubmis = { ...emailList.value, ...duanxinList.value }
}
</script>

<style lang="scss" scoped>
.pushtime_lg {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  margin-right: 15px;
  background-color: #6675FF;

}

.pushemail {
  display: flex;
  justify-content: space-between;
  width: 500px;
  margin-top: 30px;

  .pushemailBox {
      display: flex;
      align-items: center;
      margin-top: 15px;

      .pushemailBox_two {
          margin-left: 15px;
      }
  }
}

.pusettings {
  height: 940px;
  padding: 20px;
  background-color: #fff;

  .pushtime {
      display: flex;
      height: 40px;
      margin-top: 15px;
      border-bottom: 1px solid #EEEEEE;
  }

  .workdays {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 300px;

      .workdays_color {
          color: #6675FF;
      }
  }

  .workdays_time {
      margin-top: 15px;
  }
}

::v-deep {
  .el-checkbox.el-checkbox--large .el-checkbox__inner {
      width: 15px;
      height: 15px;
  }

  .el-checkbox.el-checkbox--large .el-checkbox__label {
      margin-left: 5px;
      font-size: 15px;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #000;
  }
}
</style>  